<script setup>
import { reactive, ref, computed } from 'vue';
import { useBuildAllList } from '../../../hooks/lq_index';
import { addBuildingApi, editBuildingApi, getBuildingInfoApi } from '../../../api/floor';
import { ElMessage } from 'element-plus';

// ==================
const buildList = useBuildAllList()

const emit = defineEmits(['updateList']) //子父通信
// ======= 表单数据 ========= 为了方便重置时取值 做了个展开操作
const defaultState = {
    community_code: '',
    desc: '',
    house: '',
    lift: '',
    name: '',
}
const formData = reactive({ ...defaultState })
// 校验规则
const formRules = {
    community_code: [{ required: true, message: '请选择', trigger: 'change' }],
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    lift: [{ required: true, message: '电梯数不可为空且检查类型', type: 'number', trigger: 'blur' }],
    house: [{ required: true, message: '总户数不可为空且检查类型', type: 'number', trigger: 'blur' }],
}
// 表单ref引用
const formRef = ref()
// 弹框控制变量
const isShow = ref(false)
// 表单提交
const onSubmit = async () => {
    try {
        // 表单校验
        await formRef.value.validate()
        // 整理数据
        // 发送请求
        formData.id ? await editBuildingApi(toRaw(formData)) : await addBuildingApi(toRaw(formData))
        // 消息提示
        ElMessage.success('操作成功')
        // 关闭抽屉
        isShow.value = false
        // 列表更新
        emit('updateList')
    } catch (error) {
        console.log(error);
    }
}
//关闭事件
const closeHandler = () => {
    formRef.value.resetFields()
    Object.assign(formData, { ...defaultState })
}
// 回显操作
const replyData = async (id) => {
    let res = await getBuildingInfoApi(id)
    Object.assign(formData, res.data)
    console.log(formData);
    isShow.value = true
}
// 标题优化
const title = computed(() => {
    return formData.id ? '修改' : '添加'
})
// ===============VUE3 中组件是封闭的 需要抛出去
defineExpose({
    isShow, replyData
})
</script>

<template>
    <el-drawer size="35%" :destroy-on-close="true" v-model="isShow" :title="title"  @close="closeHandler">
        <el-form :model="formData" ref="formRef" :rules="formRules" label-width="80px" label-position="top" :inline="true"
            size="default">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="community_code" label="所属小区">
                        <el-select clearable v-model="formData.community_code" placeholder="请选择">
                            <el-option v-for="item in buildList" :key="item.id" :label="item.name"
                                :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="name" label="栋数名称">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="lift" label="电梯数">
                        <el-input type="number" min="0" v-model.number="formData.lift"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="house" label="总户数">
                        <el-input type="number" min="0" v-model.number="formData.house"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="desc" label="描述">
                        <el-input v-model="formData.desc" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style  scoped></style>